#menu-section div.table.new-item{
    opacity: 1;
}

#services_link, .cell .services
{
    opacity: 0.5;
}


.active #services_link, .active .cell .services
{
 opacity: 1;   
}

#menu-section div.table div.cell i.new-sticker{
    background: url('../img/new.svg') no-repeat center;
    opacity: 1;   
    display: inline-block;
    position: absolute;
    top: 2px;
    left:100px;
    width: 48px;
    height: 24px;    
}

.cursor-wait {
    cursor: wait !important;
}
.services-container
{
    width: 100%;
}
@media (max-width: 1027px) {
    .services-container{
        padding:20px 20px 20px 20px;
    }
}
@media (min-width: 1028px) {
    .services-container{
        padding:40px 55px 40px 55px;
    }
}

.active_services
{margin-bottom: 40px;}

.services-header{
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    color: #354650;
}

.service-blue{
    color: #54D0FF;
}

.service-green{
    color: #1DD384;
}

.service-red{
    color: #F5A623;
}

.service-card{
    width: 320px;
    /*border: 1px solid #54D0FF;*/
    border-radius: 10px;
    /*background-color: #F3FCFF;*/
    border: 1px solid #C6D0D8;
    background-color: #FFF;
    position: relative;    
    display: inline-block;
    margin: 20px 20px 0 0;
    padding: 0;
    vertical-align: top;  
}

.service-card.service-manage .service-descr{
    margin-bottom: 90px;
    text-align: center;
    color: #728B9B;
}

.service-card.service-manage .btn-service-manage{
    background-color: #fff;
    color: #354650;
    border: 1px solid #C6D0D8;
}

.service-card.service-manage .btn-service-manage:hover{
    background-color: #F3FCFF;
    border-color: #54D0FF;
}

.service-card.service-manage .btn-service-manage img{
    margin-right: 8px;
}


@media (max-width: 500px) {
    .service-card{
        width: 100%;
    }
}

.service-add-other{    
    border: 1.5px dashed #C6D0D8;
    background-color: #FFF;   
    cursor: pointer;   
    min-height: 493px;
    background: url('../img/add-icon.svg') no-repeat center center;
    padding-bottom: 75px;
    background-origin: content-box;
}

.service-add-other:hover{
    background-color: #F3FCFF;
    border-color: #54D0FF;
}

.service-icon{    
    background: url('../img/rounding.svg') no-repeat center bottom;
    height: 155px;
    border-top-right-radius: 10px;  
    border-top-left-radius: 10px;    
    background-color: #EAF9FF;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    height: inherit;
    overflow: hidden;
    position: relative;
    z-index: 2

}


.service-icon img {
    width: 100%;    
}


.modal-header .service-icon{
    width: 80px;
    height: 70px;
    background-size: contain;
}

.service-doctor, .service-icon-1{
    background: url('../img/doctor-3-small.png') no-repeat bottom center;
}

.service-screening, .service-icon-2{
    background: url('../img/screening-3-small.png') no-repeat center center;
}

.service-processing, .service-icon-3{
    background: url('../img/processing-3-small.png') no-repeat bottom center;
}

.service-training, .service-icon-4{
    background: url('../img/training-3-small.png') no-repeat bottom center;
}


.service-staffing{
    background: url('../img/staffing-icon.svg') no-repeat center center;
}

.service-money{
    background: url('../img/test-icon.svg') no-repeat center center;
}
.service-smile{
    background: url('../img/smile-icon.svg') no-repeat center center;
}

.service-failed{
    background: url('../img/failed.svg') no-repeat center center;
    display: block !important;
    margin: 0 auto !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
.service-successful{
    background: url('../img/successful.svg') no-repeat center center;
    display: block !important;
    margin: 0 auto !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}


.service-title{
    font-size: 20px;
    margin: 20px;  
    text-align: center;  
}

.other-title{
    margin-top: 250px;  
}

.service-descr{
    font-size: 16px;   
    color: #354650;
    margin-left: 30px;
    margin-right: 30px;    
    margin-bottom: 100px;
}


.service-card ul {
    list-style-type: none;
    margin-left: 30px;
    margin-bottom: 0px;
    min-height: 166px;
}

.service-card ul li {
    position: relative;
    margin-bottom: 20px;
    line-height:18px; 
}
.service-card ul li::before {
    color: #54D0FF;
    content: url("../img/check-blue.svg");
    font-size: 16px;
    left: -30px;
    line-height: 24px;        
    position: absolute;
    top: 0;
}


.service-button-containter{
    /*display: inline-block;*/
}

.service-card .service-button-containter{
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}
.btn-service{
    height: 45px;
    width: 100%;
    cursor: pointer;
    
}

.service-price{    
    display: inline-block;
    height: 45px;
    line-height: 45px;   
    float: right; 
   
}

.service-card .service-price{  
    right: 20px;
    position: absolute;
    bottom: 20px;  
}


/*
Big modal form
*/
.serviceModal {
    color: #354650;
    font-family: 'Lato', sans-serif;   
    overflow-x: hidden;
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
}

.serviceModal .modal-dialog {
    max-width: 750px;
}

.serviceModal .modal-content{
    padding: 30px 50px 50px 50px;
    border-radius: 10px;
}

.serviceModal .modal-header {
    position: relative;
    border: none;
    padding: 0;
    display: block;
    margin-bottom: 17px;    
}

.serviceModal .service-icon
{
    display: inline-block;
    margin-right: 24px;
}

.serviceModal button.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
    z-index: 2;
}

.serviceModal .modal-title {
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    text-align: left;    
    margin-top: 15px;
    vertical-align: top; 
    max-width: 300px;
}

.serviceModal.wideModal .modal-title {
    font-size: 20px;
    max-width: 360px;
}



.serviceModal.service-type-manage .modal-title  {
     margin-top: 15px;
}


.serviceModal .modal-title p{
    font-size: 14px;
    line-height: 14px;
    color: #728B9B;
    margin-top: 10px;
    margin-bottom: 0px;
}

.serviceModal .service-button-containter{
    display: inline-block;
    vertical-align: top;
    float: right;
    margin-top: 15px;
}

.serviceModal .btn-service{
    width: 170px;
}

.serviceModal .service-cancel{
    display: block;
    vertical-align: top;    
    color: #728B9B;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
    margin-right: 10px;
}

.serviceModal .modal-body {
    padding: 0;
}

.serviceModal .service-line{
    height: 1px;
    background: #C6D0D8;
}

.serviceModal .service-menu{
    display: flex;
    justify-content: space-around;
}

.serviceModal .service-menu-item{
    font-size: 16px;
    line-height: 25px;
    margin-top: 17px;
    margin-bottom: 17px;
}

.serviceModal .service-menu-item a, .serviceModal .service-menu-item a:hover{
    color: #728B9B;
    text-decoration: none;
}

.serviceModal .service-block-title{
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 20px;
}
.serviceModal .service-block-body{
    font-size: 16px;
}

.serviceModal .service-point{
    font-size: 6px; 
    color: #54D0FF; 
    vertical-align: top; 
    margin-right: 15px; 
    margin-top: 10px;
}

.serviceModal .service-phone{    
    color: #54D0FF;
}
.serviceModal .service-block-body ul {
    list-style-type: none;
    margin-left: 21px;
    margin-bottom: 0px;
}

.serviceModal .service-block-body ul li {
    position: relative;
    margin-bottom: 1rem;
}
.serviceModal .service-block-body ul li::before {
    color: #54D0FF;
    content:"\2022";
    font-size: 16px;
    left: -21px;
    line-height: 24px;        
    position: absolute;
    top: 0;
}

.serviceModal .service-block-body ul :last-child {
    margin-bottom: 0;
}

.serviceModal .service-plan{
    padding: 20px 30px 30px 30px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #C6D0D8;
    margin-bottom: 20px;
}

.serviceModal .service-plan-title{
    //color: #54D0FF;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 27px;
    font-size: 14px;
}

.serviceModal .service-plan-price{
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 25px;
    font-size: 20px;
}

.serviceModal ol{
  counter-reset: myCounter;
  margin-left: 26px;
  margin-bottom: 0px;
}

.serviceModal ol li{
  list-style: none;
  position: relative;
}

.serviceModal ol .service-line {
    margin-left: -26px;    
}

.serviceModal .service-question{
    margin-bottom: 10px;
    padding-right: 40px;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
    margin-left: 15px;
}

.service-question::before {
  counter-increment: myCounter;
  content:counter(myCounter) '.';
  color: #54D0FF;
  display: inline-block;  
  margin-top: 20px;
  margin-left: -35px;
  line-height: 24px;
  text-align: left;
  width: 35px;
  height: 24px;
  font-size: 20px;
  font-weight: bold;
}

.service-question:after {
    content: url('../img/arrow-icon.svg');
    line-height: 24px;
    position: absolute;
    margin-top: 20px;    
    top: 0;
    right: 0;
    cursor: pointer;
    transform: rotate(180deg);
    transition: transform 0.5s;
}

.expanded .service-question::after  {
    transform: rotate(0deg);
}

.serviceModal .service-answer{
    //display: inline-block;
    margin: 0;
    opacity: 0;
    height: 0;
    transition: opacity 1s;   
    animation-name: fadeIn; 
    overflow: hidden;
}

.expanded .service-answer {
    opacity: 1;
    height: auto;    
    margin-bottom: 30px;    
}

.serviceModal .service-ask{
    margin-top: 50px;
    width: 100%;
    text-align:center;
}

.serviceModal .service-ask .btn{
    display: inline-block;
    width: 270px;
}

.service-ask-question{
    margin-bottom: 30px;
}

.service-ask-question textarea, .service-other-text textarea,  .service-cancel-text textarea {
    height: 90px;
    width: 100%;
    border: 1px solid #C6D0D8;
    resize: none;
    border-radius: 6px;
    background-color: #F2F6FB;
    //box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06);
    padding: 15px;
}


.service-ask-question textarea:focus, .service-other-text textarea:focus,  .service-cancel-text textarea:focus{
    border-color: #54D0FF;
}

.service-ask-question textarea.attention, .service-other-text textarea.attention, .service-cancel-text textarea.attention
{
    border-color: #FF2F4F;
}


   

/*small modal*/

.smallModal{
    overflow-x: hidden;
    overflow-y: hidden;
}


.smallModal .modal-dialog
{

    width: 360px;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


.smallModal.wideModal .modal-dialog
{
    width: 420px;
}

.smallModal .modal-header {
    margin-bottom: 20px;
    height: auto;
}

.smallModal .modal-title
{
    margin-top: 0;
    line-height: 1.3;
}

.smallModal .modal-content{
    padding: 32px 30px 32px 30px;
    border-radius: 10px;
    min-height: 260px;
}


.smallModal .btn-service{
    height: 55px;
}

.smallModal .service-plan-item,
.smallModal .service-payment-item,
.smallModal .service-other-item {    
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #C6D0D8;
    background-color: #FFF;
    border-radius: 6px;    
    padding: 0;
    font-size: 16px;
    height: 55px;
    position: relative;
}

.smallModal .service-plan-item.active,
.smallModal .service-payment-item.active,
.smallModal .service-other-item.active {
    border: 1px solid #54D0FF;
    background-color: #F3FCFF;
}

.smallModal .service-plan-item label{
    vertical-align: middle;
    margin:0;
    display: block;
    width: 100%;        
    line-height: 47px;
    cursor: pointer;
    padding-left: 20px;
}

.smallModal .service-payment-item label{
    vertical-align: middle;
    margin:0;
    display: block;
    width: 100%;        
    line-height: 53px;
    cursor: pointer;
    padding-left: 50px;
}

.smallModal a.service-plan-item, .smallModal a.service-plan-item:hover,
.smallModal a.service-payment-item, .smallModal a.service-payment-item:hover,
.smallModal a.service-other-item, .smallModal a.service-other-item:hover
{
    display: block;
    color: #354650;
    text-decoration: none;
}



.smallModal .service-finish{
    width: 100%;
    margin-top: 15px;    
    background-color: #EBFAFF;
    border-radius: 6px;    
    padding: 10px 15px 10px 15px;  
    font-size: 14px;          
    line-height: 20px;  
}

.smallModal .service-plan-next, .smallModal .service-other-submit, .smallModal .service-cancel-submit {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.smallModal .service-plan-next .btn-service, .smallModal .service-other-submit .btn-service, .smallModal .service-cancel-submit .btn-service{
    width: 100%;
}

.smallModal .service-plan-next a, .smallModal .service-plan-next a:hover{
    line-height: 40px;
    color: #fff;
}

.smallModal .service-cancel-submit .service-cancel-btn{
    background: #FF2F4F;
}


.smallModal .service-payment-sum
{
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 25px;
}

.smallModal .service-icon{
    margin: 0;    
}


.service-plus {
    position: absolute;
    top: 18px;
    left: 15px;
    width: 26px;
    height: 20px;
    background: url('../img/plus.svg') no-repeat center center;
}
.service-visa {
    position: absolute;
    top: 18px;
    left: 15px;
    width: 26px;
    height: 20px;
    background: url('../img/bank-card.svg') no-repeat center center;
}
.service-master-card {
    position: absolute;
    top: 18px;
    left: 15px;
    width: 26px;
    height: 20px;
    background: url('../img/Master-card.svg') no-repeat center center;
}


/*radio buttons*/
.service-radio, .service-checkbox {
    display: none;
}
.service-radio-custom {
    width: 21px;
    height: 21px;
    border: 1px solid #C6D0D8;
    border-radius: 3px;
    position: relative;
    float: right;
    margin-top:15px;
    margin-right: 15px;
}


.smallModal .service-other-item label{
    padding-left: 15px;
    vertical-align: middle;
    margin:0;
    display: block;
    width: 100%;        
    line-height: 47px;
    cursor: pointer;
    
}

.smallModal .service-plan-item:hover,  .smallModal .service-other-item:hover{
      border: 1px solid #54D0FF;
}

.service-radio-custom,
.service-plan-label,
.service-plan-price
 {
    display: inline-block;
    vertical-align: middle;
}

.smallModal .service-plan-label {
    width: 65%;
}

.smallModal .service-plan-label.monthly {
    width: 45%;
}


.smallModal .service-plan-price
{
    font-size: 16px;
    margin: 0;
    line-height: 47px;
    
}

.service-radio:checked + .service-radio-custom::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    background: #54D0FF;    
    border-radius: 2px;
}
.service-radio-custom,
.service-radio:checked + .service-radio-custom::before {
    border-radius: 50%;
}

.service-radio:checked + .service-radio-custom{
    border: 1px solid #54D0FF;
}



.service-checkbox-custom {
    width: 25px;
    height: 25px;
    border: 1px solid #C6D0D8;
    border-radius: 3px;
    position: relative;
    float: left;
    margin-top:15px;
    margin-right: 15px;
}
.service-checkbox:checked + .service-checkbox-custom::before {
    content: url('../img/check-white1.svg');
    display: block;
    position: absolute;
    top: -13px;
    left: 5px;
}
.service-checkbox-custom,
.service-checkbox:checked + .service-checkbox-custom::before {
    border-radius: 3px;
}

.service-checkbox:checked + .service-checkbox-custom{
    border: 1px solid #54D0FF;
    background-color: #54D0FF;
}


.service-get-btn, .service-confirm-payment, .service-upgrade {
    background-color: #1DD384;
}

.service-get-btn:hover, .service-confirm-payment:hover, .service-upgrade:hover  {
   background-color: #15B36E;
}



.serviceModal .service-get-btn, .serviceModal .service-upgrade{
    width: 200px !important;
}


/*for mobile*/
@media (max-width: 700px) {
  
    .smallModal .modal-dialog
    {
        position: relative;
        width: auto;
        max-width: 360px;
        left: 47.5% !important;
    }

    .serviceModal .modal-content{
        padding: 20px;
    }

    .serviceModal .modal-header{
        height: auto;
        margin-bottom: 32px;
    }

    .serviceModal .modal-title {
        display: block;
        text-align: center;
        max-width: 100%;
        margin-left: 10px;
        margin-right: 10px;
        
    }

    .serviceModal .modal-title p{
        font-size: 16px;
        line-height: 24px;
    }

    .serviceModal .service-button-containter{
        float:left;
        margin-top: 28px;
        width: 100%;
    }

.serviceModal.service-type-manage .service-button-containter{
    margin-top: 20px;
}

.serviceModal .service-cancel{
    margin-right: 0px;
    text-align: center;
    margin-top:10px;
    height: 30px;
}

    .serviceModal .service-get-btn, .serviceModal .service-upgrade
    {
        width: 100% !important;
    }

    .serviceModal .service-icon{
        width: 100%;
        margin-right: 0;
        height: 110px;
    }

    .service-doctor {
        background: url(../img/doctor-3-mobile.png) no-repeat bottom center;
    }

    .service-screening {
        background: url(../img/screening-3-mobile.png) no-repeat bottom center;
    }

    .service-processing {
        background: url(../img/processing-3-mobile.png) no-repeat bottom center;
    }

    .service-training {
        background: url(../img/training-3-mobile.png) no-repeat bottom center;
    }    

    .serviceModal .service-menu-item{
        font-size: 14px;
    }

    .serviceModal .service-block-title{
        margin-top: 30px;
    }

    .serviceModal .service-block-title{
        font-size: 20px;
    }

    .serviceModal .service-menu{
        justify-content: space-between;
    }

    .service-question::before{
        font-size: 18px;
    }

    .serviceModal .service-ask{
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .modal-dialog{
        margin:10px;
    }

}


#serviceModal-other .modal-dialog{
    top: 720px !important;
}

.service-plan-header {
    font-size: 16px;
    margin-bottom: 20px;
    color: #728B9B;
}